<template>
	<div class="publicpageview"  id="publicpageview">
		<div class="publicformview">
			<el-form :model="addQuery" class="demo-ruleForm" label-position="right" label-width="160px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="合同编号：" prop="contractno">
							<div style="display: flex;">
								<el-input v-model="addQuery.contractno"></el-input>
								<el-button style="margin-left: 5px;" size="mini" type="primary" @click="createcID">查询</el-button>
							</div>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item>
							<div class="buttons">
								<el-button type="primary" @click="gotos" size="medium">返回</el-button>
								<el-button type="primary" size="medium" v-print="printObj">打印分户</el-button>
								<div id="loading" v-show="printLoading"></div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
								
				<el-row :gutter="24">
					<el-col :span="8">
						<el-form-item label="业务编号：" prop="fcode">
							<el-input disabled v-model="addQuery.fcode"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="承租人：" prop="owner">
							<el-input disabled v-model="addQuery.owner"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="承租人身份证号：" prop="idcard1">
							<el-input disabled v-model="addQuery.idcard1"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="房屋地址：" prop="addr">
							<el-input disabled v-model="addQuery.addr"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="产别：" prop="realway">
							<el-input disabled v-model="addQuery.realway"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="间数：" prop="roomcount">
							<el-input disabled v-model="addQuery.roomcount"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="间号：" prop="roomno">
							<el-input disabled v-model="addQuery.roomno"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="计租面积独用：" prop="singlearea">
							<el-input disabled v-model="addQuery.singlearea"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="计租面积伙用：" prop="mixarea">
							<el-input disabled v-model="addQuery.mixarea"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<el-table v-loading="listLoading" :data="searchList" border fit highlight-current-row size="mini"
				style="margin-top: 20px;">
				<el-table-column align="center" label="分户" type="index">
				</el-table-column>

				<el-table-column align="center" label="申请人">
					<template slot-scope="scope">
						<el-input v-model="scope.row.renter"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="申请人身份证号">
					<template slot-scope="scope">
						<el-input v-model="scope.row.idCard"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="独用">
					<template slot-scope="scope">
						<el-input v-model="scope.row.singleUseArea"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="伙用">
					<template slot-scope="scope">
						<el-input v-model="scope.row.shareArea"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="间数">
					<template slot-scope="scope">
						<el-input v-model="scope.row.roomCount"></el-input>
					</template>
				</el-table-column>

				<el-table-column align="center" label="间号">
					<template slot-scope="scope">
						<el-input v-model="scope.row.roomNo"></el-input>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="100" fixed="right">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="addFenhu">添加并户</el-button>
						<el-button type="text" size="mini" @click="delFenhu(scope.row.index)">删除并户</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-form :model="addQuery" :disabled="dialogName=='区公司复核分户'||dialogName=='总公司审核分户'||dialogName=='详情'"
				style="margin-top: 30px;">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="提交材料是否齐全：" prop="material" label-width="280px">
							<el-switch v-model="addQuery.material" active-value="是" inactive-value="否">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否有房屋使用权争议：" prop="disagree" label-width="280px">
							<el-switch v-model="addQuery.disagree" active-value="是" inactive-value="否">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否拖欠住房租金：" prop="owe" label-width="280px">
							<el-switch v-model="addQuery.owe" active-value="是" inactive-value="否">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="房屋是否转租：" prop="contract" label-width="280px">
							<el-switch v-model="addQuery.contract" active-value="是" inactive-value="否">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否拆改住房结构和违章建筑：" prop="destroy" label-width="280px">
							<el-switch v-model="addQuery.destroy" active-value="是" inactive-value="否">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="申请人是否有本市常住居民户口：" prop="city" label-width="280px">
							<el-switch v-model="addQuery.city" active-value="是" inactive-value="否">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="是否由成套独用住房变为成套伙用住房：" prop="change" label-width="280px">
							<el-switch v-model="addQuery.change" active-value="是" inactive-value="否">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注：" prop="memo" label-width="140px">
							<el-input v-model="addQuery.memo"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="文件名称：" prop="floorcount" label-width="140px">
							<div v-if="dialogName == '分户登记'" style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">文件上传
							</div>
							<div v-else style="line-height: 40px;color: blueviolet;" @click="handleUploadScan">查看文件</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div class="contentAll">
				<div class="goufangContent">
					<el-form style="width: 340px;" :model="jinbanQuery" disabled ref="dataForm" class="demo-ruleForm"
						label-position="right" label-width="100px">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="经办人意见：" prop="fgzcheckview">
									<div style="display: flex;">
										<el-input v-model="jinbanQuery.fgzcheckview"></el-input>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="经办人：" prop="fgzcheck">
									<el-input v-model="jinbanQuery.fgzcheck"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="经办时间：" prop="fgzcheckdate">
									<el-date-picker v-model="jinbanQuery.fgzcheckdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="goufangContent">
					<el-form :model="fangguanQuery"  :disabled="dialogName!='房管站审核'" ref="dataForm" class="demo-ruleForm" label-position="right"
						label-width="200px" style="width: 450px;">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="管理部（分中心）负责人意见：" prop="fgzmanagerview">
									<div style="display: flex;">
										<el-select v-model="fangguanQuery.fgzmanagerview">
											<el-option label="同意" value="同意" key="00"></el-option>
										</el-select>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="负责人：" prop="fgzmanager">
									<el-input v-model="fangguanQuery.fgzmanager"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="经办时间：" prop="fgzmanagerdate">
									<el-date-picker v-model="fangguanQuery.fgzmanagerdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					<img class="imgs" :src="addQuery.imghousestation" alt="" />
					</el-form>
				</div>
				<div class="goufangContent">
					<el-form style="width: 340px;" :model="fuheQuery" :disabled="dialogName!='区公司复核分户'" ref="dataForm"
						class="demo-ruleForm" label-position="right" label-width="100px">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="核查意见：" prop="qgsview">
									<div style="display: flex;">
										<el-select v-model="fuheQuery.qgsview">
											<el-option label="同意" value="同意" key="00"></el-option>
											<el-option label="不同意" value="不同意" key="40"></el-option>
										</el-select>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="核查人：" prop="qgscheck">
									<el-input v-model="fuheQuery.qgscheck"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="6">
								<el-form-item label="核查时间：" prop="qgsdate">
									<el-date-picker v-model="fuheQuery.qgsdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					<img class="imgs" :src="addQuery.imgcompany" alt="" />
					</el-form>
				</div>
				<div class="goufangContent">
					<el-form style="width: 340px;" :model="shenheQuery" :disabled="dialogName!='总公司审核分户'" ref="dataForm"
						class="demo-ruleForm" label-position="right" label-width="100px">
						<el-row :gutter="24">
							<el-col :span="24">
								<el-form-item label="抽查意见：" prop="zgsview">
									<div style="display: flex;">
											<el-select v-model="shenheQuery.zgsview">
												<el-option label="同意" value="同意" key="00"></el-option>
												<el-option label="不同意" value="不同意" key="40"></el-option>
											</el-select>
										<div style="width: 100px;margin-left: 20px;">(签章)</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="抽查人：" prop="zgscheck">
									<el-input v-model="shenheQuery.zgscheck"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="24">
							<el-col :span="12">
								<el-form-item label="抽查时间：" prop="zgsdate">
									<el-date-picker v-model="shenheQuery.zgsdate" type="date" placeholder="年/月/日">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					<img class="imgs" :src="addQuery.imgcompany" alt="" />
					</el-form>
				</div>

			</div>

			<div class="saveContent">
				<el-button  v-if="dialogName!='详情'" type="primary" @click="save" size="medium">保 存</el-button>
			</div>

		</div>
		
		<!-- 扫描件上传组件 -->
		<managementFileUpload :visible.sync='uploadDialogVisible' :ImgUpload='fileList' @close='uploadClose' @confirm='uploadConfirm' />
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		addSplittingFamily,
		splittingFamilySubmit,
		splittingFamilyData,
		updSplittingFamily,
		delSplittingFamilySubmit,
		getRent
	} from '@/api/management'
	import managementFileUpload from '@/components/managementFileUpload.vue';
	export default {
		name: "AccommodationManagementChanquanzhengjian",
		components: {
			managementFileUpload
		},
		data() {
			return {
				
					printLoading: true,
					printObj: {
						id: "publicpageview",
						popTitle: '打印预览',
						extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
						beforeOpenCallback(vue) {
							console.log('打开之前')
						},
						openCallback(vue) {
							console.log('执行了打印')
						},
						closeCallback(vue) {
							console.log('关闭了打印工具')
						}
					},
				addQuery: {
					contractno: '',
					fcode: '',
					owner: '',
					idcard1: '',
					addr: '',
					realway: '',
					roomcount: '',
					roomno: '',
					singlearea: '',
					mixarea: '',
					fcode:'',

					material: '否',
					disagree: '否',
					owe: '否',
					contract: '否',
					destroy: '否',
					city: '否',
					change: '否',
					contractno: '',
					memo: '',
					imgupload: '',
					renterId:''
				},
				searchQuery: {
					renter: '',
					idCard: '',
					singleUseArea: '',
					shareArea: '',
					roomCount: '',
					roomNo: ''
				},
				searchList: [],
				rules: {
				},
				fuheQuery: {
					qgsview: '',
					qgscheck: '',
					qgsdate: ''
				},
				shenheQuery: {
					zgsdate: '',
					zgsview: '',
					zgscheck: ''
				},
				fangguanQuery: {
					fgzmanagerview: '',
					fgzmanager: '',
					fgzmanagerdate: ''
				},
				jinbanQuery:{
					fgzcheckview:'',
					fgzcheckdate:'',
					fgzcheck:''
				},
				newAddQuery: {},
				list: [],
				listLoading: false,
				dialogVisible: false,
				addQueryle: false,
				shenheName: '经营管理意见',
				type: '',
				uploadDialogVisible: false,
				dialogName: '',
				shenheVisible: false,
				fid: '',
				isSearch: false,
				uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
				fileList:[],
			};
		},

		computed: {

		},

		mounted() {
			console.log(this.$route.query.dialogName)
			this.dialogName = this.$route.query.dialogName
			this.fid = this.$route.query.fid
			this.newAddQuery = JSON.stringify(this.addQuery)
			
			this.splittingFamilyData()
			
			this.addFenhu()
			this.addFenhu()
		},

		methods: {
			createcID() {
				if (this.addQuery.contractno) {
					let data = {
						cid: this.addQuery.contractno
					}
					getRent(data).then(res => {
						console.log(res)
						this.addQuery.owner = res.data.renter
						this.addQuery.addr = res.data.address
						this.addQuery.idcard1 = res.data.renteridno
						this.addQuery.realway = res.data.ownway
						this.addQuery.roomcount = res.data.roomcount
						this.addQuery.roomno = res.data.roomno
						this.addQuery.singlearea = res.data.singleusearea
						this.addQuery.mixarea = res.data.sharearea
						this.addQuery.renterId = res.data.renterid
					})
				} else {
					this.$message({
						type: 'success',
						message: '请输入合同号!'
					})
				}
			},
			addFenhu() {
				let newQuery = JSON.stringify(this.searchQuery)
				this.searchList.push(JSON.parse(newQuery))
				this.searchList.forEach((item,index)=>{
					item.index = index
				})
				console.log(this.searchList)
			},
			delFenhu(index){
				console.log(index)
				if(this.searchList.length>2){
					this.searchList.splice(index,1)
					this.searchList.forEach((item,index)=>{
						item.index = index
					})
				console.log(this.searchList)
				}else{
					this.$message({
						type: 'success',
						message: '最少保留两个分户!'
					});
				}
				
			},
			gotos(){
				this.$router.go(-1)
			},
			gotodaying(){
				this.$router.push({
					path: 'zhuangxiushebei',
					// query: {
					// 	addQuery: JSON.stringify(this.addQuery)
					// }
				})
			},
			// 保存
			save() {
				// this.$refs.addForm.validate((valid) => {
				// 	if (valid) {
				// 		if (this.dialogName == '分户登记') {
				// 			this.addSplittingFamily()
				// 		} else if (this.dialogName == '分户修改' || this.dialogName == '总公司审核分户' || this.dialogName == '区公司复核分户') {
				// 			this.updSplittingFamily()
				// 		}
				// 	} else {
				// 		console.log('验证失败！');
				// 		return false;
				// 	}
				// });
				console.log(this.dialogName)
				if (this.dialogName == '分户登记') {
					this.addSplittingFamily()
				} else if (this.dialogName == '分户修改' || this.dialogName == '总公司审核分户' || this.dialogName == '区公司复核分户' || this.dialogName == '房管站审核') {
					this.updSplittingFamily()
				}

			},
			// 登记
			addSplittingFamily() {
				let data = this.addQuery
				data.fenhuApplyList = this.searchList
				this.listLoading = true;
				addSplittingFamily(data).then(res => {
					this.listLoading = false;
					this.shenheVisible = false
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			},
			// 修改
			updSplittingFamily() {
				let data
				if (this.dialogName == '分户修改') {
					data = this.addQuery
				} else if (this.dialogName == '总公司审核分户') {
					data = this.shenheQuery
					if(data.zgsview=='同意'){
						data.state = 40
					}else{
						data.state = -2
					}
					if (data.zgsdate) {
						data.zgsdate = dayjs(data.zgsdate).format('YYYY-MM-DD HH:mm:ss')
					}
				} else if (this.dialogName == '区公司复核分户') {
					data = this.fuheQuery
					if(data.qgsview=='同意'){
						data.state = 50
					}else{
						data.state =-1
					}
					if (data.qgsdate) {
						data.qgsdate = dayjs(data.qgsdate).format('YYYY-MM-DD HH:mm:ss')
					}
				} else if (this.dialogName == '房管站审核') {
					data = this.fangguanQuery
					data.state = 20
					if (data.fgzmanagerdate) {
						data.fgzmanagerdate = dayjs(data.fgzmanagerdate).format('YYYY-MM-DD HH:mm:ss')
					}
				}
				data.fid = this.fid
				this.listLoading = true;
				updSplittingFamily(data).then(res => {
					console.log(res)
					this.listLoading = false;
					this.shenheVisible = false
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				})
			},
			handleUpdate(currentData) {
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {});
			},
			// 详情
			splittingFamilyData() {
				let data = {
					FID: this.fid
				}
				splittingFamilyData(data).then(res => {
					console.log(res)
					this.addQuery = res.data
					this.searchList = res.data.fenhuApplyList
					// this.addQuery.jizumianji = res.data.singlearea + res.data.mixarea
					this.fileList = JSON.parse(res.data.imgupload)
					
					this.jinbanQuery.fgzcheckview = res.data.fgzcheckview
					this.jinbanQuery.fgzcheckdate = res.data.fgzcheckdate
					this.jinbanQuery.fgzcheck = res.data.fgzcheck
					
					if (this.dialogName == '区公司复核分户') {
						this.fangguanQuery.fgzmanager = res.data.fgzmanager
						this.fangguanQuery.fgzmanagerdate = res.data.fgzmanagerdate
						this.fangguanQuery.fgzmanagerview = res.data.fgzmanagerview
						this.fuheQuery.qgscheck = localStorage.getItem('username')
						this.fuheQuery.qgsdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
					} else if (this.dialogName == '总公司审核分户') {
						this.shenheQuery.zgsdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
						this.shenheQuery.zgscheck = localStorage.getItem('username')
						this.fuheQuery.qgsview = res.data.qgsview
						this.fuheQuery.qgscheck = res.data.qgscheck
						this.fuheQuery.qgsdate = res.data.qgsdate
						this.fangguanQuery.fgzmanager = res.data.fgzmanager
						this.fangguanQuery.fgzmanagerdate = res.data.fgzmanagerdate
						this.fangguanQuery.fgzmanagerview = res.data.fgzmanagerview
					} else if (this.dialogName == '分户修改'||this.dialogName == '详情') {
						this.fuheQuery.qgsview = res.data.qgsview
						this.fuheQuery.qgscheck = res.data.qgscheck
						this.fuheQuery.qgsdate = res.data.qgsdate
						this.shenheQuery.zgsdate = res.data.zgsdate
						this.shenheQuery.zgsview = res.data.zgsview 
						this.shenheQuery.zgscheck = res.data.zgscheck
						this.fangguanQuery.fgzmanager = res.data.fgzmanager
						this.fangguanQuery.fgzmanagerdate = res.data.fgzmanagerdate
						this.fangguanQuery.fgzmanagerview = res.data.fgzmanagerview
					}else if (this.dialogName == '房管站审核') {
						this.fangguanQuery.fgzmanager = localStorage.getItem('username')
						this.fangguanQuery.fgzmanagerdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
					}
				})
			},
			// 重置
			rester() {
				this.addQuery = JSON.parse(this.newAddQuery)
			},
			handleDelete(fid) {
				this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						FID: fid
					}
					delSplittingFamilySubmit(data).then(res => {
						console.log(res)
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();

						this.rester()
					})
					.catch(_ => {});
			},
			// 扫描件上传
			handleUploadScan() {
				this.uploadDialogVisible = true;
			},
			uploadClose() {
				this.uploadDialogVisible = false
			},
			uploadConfirm(fileList) {
				this.addQuery.imgupload = JSON.stringify(fileList)
				this.uploadDialogVisible = false
				this.fileList = fileList
			}
		},
	};
</script>
<style scoped>
	.publicpageview{
		width: 1000px;
		margin: 0 auto;
	}
	.tianjiaButton {
		border: 2px solid #008C93;
		background-color: #fff;
		color: #008C93;
	}


	.contentAll {
		display: flex;
		align-items: center;
		background-color: #F7F7F7;
		flex-wrap: wrap;
	}

	.goufangContent {
		width: 50%;
		box-sizing: border-box;
		/* padding: 20px; */
		border: 1px solid #008C93;
		height: 300px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.imgs {
		width: 80px;
		height: 80px;
		margin: 0 auto;
		display: block;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}



	/dee/.el-date-editor {
		width: 120px !important;
	}

	/deep/.el-input__inner {
		width: 160px;
	}

	/deep/.publicpaginationview .el-input__inner {
		width: 100px;
	}

	/deep/.publicpaginationview .is-in-pagination .el-input__inner {
		width: 50px;
	}

	.section-title {
		margin: 20px auto;
		display: flex;
		justify-content: space-between;
	}
	.buttons{
		display:flex;
		align-items: center;
	}
</style>